<template>
	<view>
		<form>
			<!-- <view class="cu-card margin radius">
        <view class="cu-form-group margin-top">
          <view class="title">工程编号</view>
          <view>{{ dataInfo.projectno }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title xm-title">工程名称</view>
          <view class="sub-title">{{ dataInfo.projectname }}</view>
        </view>
      </view> -->
			<xmInfo :projectno="dataInfo.projectno" :projectname="dataInfo.projectname"></xmInfo>

			<!-- <view class="cu-form-group" style="min-height: 0;margin-top: 10px;"></view> -->
			<view class="cu-form-group " style="margin-top: 10px;">
				<view class="title"></text>变更类型</view>
				<view>
					<js-select disabled v-model="dataInfo.designchangereasonid" dict-type="zf_designChg_reson_type"
						style="text-align: right;"></js-select>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">涉及水表</view>
				<view>
					<switch :checked="dataInfo.isInvolvewatermeter == 'true'?true:false" disabled />
				</view>
			</view>
			<view class="cu-form-group" style="min-height: 0"></view>

			<view class="cu-bar bg-white">
				<view class="action">变更原因</view>
			</view>

			<view class="cu-form-group">
				<textarea v-model="dataInfo.remarks" maxlength="-1" @input="textareaAInput"
				:disabled="!id || dataInfo.status == '5' ? false : true"	placeholder="请输入变更原因"></textarea>
			</view>



			<view class="cu-form-group" style="min-height: 0"></view>
			<view class="cu-bar bg-white">
				<view class="action">洽商单图片</view>
			</view>
			<view class="cu-form-group">
				<js-uploadfile v-model="dataInfo.dataMap" :biz-key="dataInfo.id" biz-type="PmNegotiation_image"
					:deletable="!!id ? false : true" :customBtn="!id ? false : true"></js-uploadfile>
			</view>

			
			<view class="cu-form-group">
				<view class=" text-xl text-bold">材料增减项</view>
			</view>
			<view class="cu-card">
				<view class="cu-item shadow" v-for="(item,index) in dataInfo.pmNegotiationMaterialList" :key="item.id"
					v-if="item.status != 1">
					<view class="cu-form-group" style="display: flex; justify-content: space-between">
						<view
							style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;width: 40px;text-align: center;font-style: italic;font-weight: bold">
							{{ index + 1 }}
						</view>
						<view class="text-xl text-bold" style="margin-left: 10px;">{{ item.mname }}

						</view>
					</view>

					<view class="cu-form-group">
						<view class="title">调整类型</view>
						<view><js-select v-model="item.ctype" dict-type="zf_mat_modify_type" disabled
								style="text-align: right"></js-select></view>
					</view>
					<view class="cu-form-group">
						<view class="title">材料编码</view>
						<view>{{ item.mcode }}</view>
					</view>
					<view class="cu-form-group">
						<view class="title">规格型号</view>
						<view>{{ item.mstd }}</view>
					</view>
					<view class="cu-form-group">
						<view class="title">单位</view>
						<view>{{ item.munit }}</view>
					</view>
					<view class="cu-form-group">
						<view>数量</view>
						<view>{{ item.iqty }}</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group" style="min-height: 0"></view>
			<view class="cu-form-group">
			    <view class=" text-xl text-bold" >确认信息</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">发出时间</view>
			    <view>{{ dataInfo.sendDate }}</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">发出人编码</view>
			    <view>{{ dataInfo.createBy }}</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">驳回时间</view>
			    <view>{{ dataInfo.backResultDate }}</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">驳回人</view>
			    <view>{{ dataInfo.backResultPerson }}</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">驳回原因</view>
			    <view>{{ dataInfo.backResult }}</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">接口错误信息</view>
			    <view>{{ dataInfo.errorContent }}</view>
			</view>
			<view class="cu-form-group ">
			    <view class="title">审核结果</view>
			    <view>{{ dataInfo.checkResult }}</view>
			</view>
			
			<view style="height: 80px"></view>
			<view class="btn-group cu-bar foot">
				<!-- <button class="cu-btn bg-green shadow-blur" @click="submit">提交</button> -->
				<js-bpm-button v-model="dataInfo.bpm" :biz-key="dataInfo.id" form-key="Flow_Design_PmNegotiation" :showTraceText="showTraceText"
					@complete="submit"></js-bpm-button>
			</view>
		</form>
		<add-detail :modalNameDetail="modalNameDetail" :pcode="dataInfo.projectno"
			@modalNameDetailEmit="modalNameDetailEmit" @checkedListEmit="checkedListEmit"
			v-if="showAddDetail"></add-detail>
	</view>
</template>
<script>
	import addDetail from "./addDetail.vue";
	import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
	import {hasPermission} from '@/common/fire.js'
	export default {
		components: {
			addDetail,
			xmInfo
		},
		data() {
			return {
				value: 200,
				switchA: false,
				date: new Date().toISOString().substring(0, 10),
				modalName: null,
				modalNameDetail: null,
				showAddDetail: false,
				dataInfo: {},
				showButton: true,
				isSubmitting: false,
				customStyle: {
					width: "100%",
					textAlign: "right",
				},
				id: "",
				bpmTaskId:'',
				showTraceText: true,
				// flag:hasPermission('btn:edit:qiashang'),
			};
		},
		onLoad(e) {
			if (!!e.id) {
				this.showButton = true;
				this.id = e.id;
				this.bpmTaskId = e['bpm.taskId'];
				this.getDesignNegotiPmNegotiationForm({
					id: e.id,
				});
				this.id = e.id;
				if (!this.bpmTaskId) {
					// this.dataInfo.bpm = {};
					this.showTraceText = false;
				}
			}
			if (!!e.xm) {
				this.showButton = true;
				this.dataInfo = JSON.parse(e.xm);
				console.log(this.dataInfo, "this.dataInfo");
				// this.dataInfo = this.xmInfo;
				// this.getweeklyPmWeeklyForm({
				//   projectno: this.dataInfo.projectno
				// })
				//   巡检人
				//   this.dataInfo.checkdate = this.date;
				//   this.dataInfo.state = 1;
				//   this.dataInfo.inspector = this.vuex_user.userName;
				//   this.dataInfo.state = 4;
			}

		},
		methods: {
			submit() {
				if (this.isSubmitting) {
					return;
				} else {
					this.isSubmitting = true;
					try {
						this.dataInfo.status = 4;
						this.$u.api.zfgs
							.designNegotiPmNegotiationSave(this.dataInfo)
							.then((res) => {
								if (res.result == "true") {
									this.$u.toast(res.message);
									const itemContent = {
										projectno: this.dataInfo.projectno,
										projectname: this.dataInfo.projectname,
									};
									setTimeout(() => {
										// uni.navigateTo({
										//   url:
										//     "/pages/zfgs/design/negoti/list?item=" +
										//     JSON.stringify(itemContent),
										// });
										uni.navigateBack({
											delta: 1,
										});
									}, 500);
								} else {
									uni.showModal({
										title: '提示',
										content: res.message,
										showCancel: false,
										success: function(res) {}
									});
									// this.$u.toast(res.message);
								}
							});
					} catch (error) {
						this.$u.toast(error.message);
					} finally {
						this.isSubmitting = false;
					}
				}
			},
			getDesignNegotiPmNegotiationForm(params) {
				this.$u.api.zfgs
					.designNegotiPmNegotiationForm({
						id: params.id == undefined ? "" : params.id,
					})
					.then((res) => {
						this.dataInfo = res.pmNegotiation;
						console.log(this.dataInfo, "res===");
						this.$forceUpdate();
					});
			},
			DelItem(event) {
				const pmid = event.currentTarget.dataset.pmid;
				uni.showModal({
					title: "",
					content: "确定要删除吗？",
					cancelText: "取消",
					confirmText: "确认",
					success: (res) => {
						if (res.confirm) {
							// 根据item.zhengGaiNo 查找要删除的项
							// let index = this.dataInfo.rectList.findIndex(
							//   (item) => item.id == items.id
							// );
							this.dataInfo.pmNegotiationMaterialList.map((item) => {
								if (item.pmid == pmid) {
									item.status = 1; //状态为1删除
									// 深度监听dataInfo.rectList
								}
							});
							this.$forceUpdate();
							console.log(this.dataInfo.pmNegotiationMaterialList);
							this.$u.toast("删除成功");
						}
					},
				});
			},
			SwitchA(e) {
				// this.switchA = e.detail.value
			},
			textareaAInput(e) {
				this.dataInfo.dmark = e.detail.value;
			},
			addDetail() {
				this.showAddDetail = true;

				this.modalNameDetail = "bottomModal";

				console.log(this.modalNameDetail);
			},
			modalNameDetailEmit(e) {
				this.modalNameDetail = e;
			},

			ViewImage(imageList, e) {
				uni.previewImage({
					urls: imageList,
					current: e.currentTarget.dataset.url,
				});
			},
			DelImg(e) {
				uni.showModal({
					title: "",
					content: "确定要删除吗？",
					cancelText: "取消",
					confirmText: "确认",
					success: (res) => {
						if (res.confirm) {
							console.log(
								res.confirm,
								this.dataInfo.dImageList,
								e,
								this.dataInfo.dImageList[e.currentTarget.dataset.index]
							);

							this.$delete(
								this.dataInfo.dImageListst,
								e.currentTarget.dataset.index
							);
						}
					},
				});
			},
			async checkedListEmit(e) {
				console.log(e, "checkedListEmit", this.dataInfo);
				if (this.dataInfo.pmNegotiationMaterialList == undefined) {
					this.dataInfo.pmNegotiationMaterialList = [];
				}

				//   创建一个数组eArray，把传递过来的部分属性赋值给eArray
				let eArray = [];
				e.forEach((item) => {
					eArray.push({
						pmid: item.id,
						mcode: item.mcode,
						"pmMaterial.mname": item.mname,
						mstd: item.mstd,
						projectno: item.pcode,
						unit: item.unit,
					});
				});

				if (this.dataInfo.pmNegotiationMaterialList.length == 0) {
					this.dataInfo.pmNegotiationMaterialList = eArray;
				} else {
					// 如果this.dataInfo.pmMaterialchecksList不为空数组，则this.dataInfo.pmMaterialchecksList和传递过来的e进行拼接，过滤掉id一样的
					this.dataInfo.pmNegotiationMaterialList =
						this.dataInfo.pmNegotiationMaterialList
						.concat(eArray)
						.filter((item, index, arr) => {
							return arr.findIndex((t) => t.pmid === item.pmid) === index;
						});
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.action {
		color: #303133;
	}

	.cu-form-group {
		flex-wrap: wrap;
	}

	.text-sl {
		font-size: 22px !important;
	}

	.cu-bar {
		min-height: 80px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		z-index: 997;
		background: #fff;
	}

	.green {
		color: green;
	}

	.text-xsl {
		font-size: 60rpx !important;
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.sub-title {
		flex-grow: 1;
		/* 让右侧内容占据剩余空间 */
		max-width: 200px;
		/* 或其他合适的最大宽度，超过这个宽度时内容会换行 */
		word-break: break-word;
		/* 或 overflow-wrap: break-word; 允许单词在必要时断开以适应宽度 */
	}

	::v-deep .u-input__input {
		width: 100%;
		text-align: right !important;
	}

	.text-xs {
		font-size: 18rpx !important;
	}
</style>